<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>matrix</title>
    <meta name="author" content="">
    <!--  http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css -->
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <!--  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css  -->
    <link rel="stylesheet" href="styles/jquery-ui-redmond.css" type="text/css" media="all"/>
    <!--  http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js  -->
    <script src="lib/jquery.min.js" type="text/javascript"></script> 
    <!--  http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js  -->
    <script src="lib/jquery-ui.min.js" type="text/javascript"></script>
    <!--  http://www.appelsiini.net/download/jquery.jeditable.mini.js  -->
    <script src="lib/jquery.jeditable.mini.js" type="text/javascript"></script>
    <!--  https://raw.github.com/dyoo/js-numbers/master/src/js-numbers.js  -->
    <script src="lib/js-numbers.js" type="text/javascript"></script>
    <style type="text/css">
    
      #intro
      {
        margin: 3em;
      }
    
      #matrix
      {
        width: 21em;
      }
      
      .centered
      {
        margin-left: auto;
        margin-right: auto; 
      }
       
      #matrix td
      {
        vertical-align: middle;
        text-align: center;
        width: 7em;
        height: 5em;   
      }      
      
      #matrix tbody tr:nth-child(even) td, #matrix tbody tr.even td 
      {
        background: none;
      }
      
      input.text { margin-bottom:12px; width:95%; padding: .4em; }
      
    </style>
    
    <script type="application/javascript">
    
      // Let's open up plt.lib.Numbers to make it easy to use.
      // var N = jsnums;
      // for (val in N)
      // {
          // if (N.hasOwnProperty(val))
          // {
            // this[val] = N[val];
          // }
      // }
    
      function multiply_inner(from, k)
      {
        return jsnums.multiply(jsnums.fromString(from), jsnums.fromString(k)).toString();        
        //return parseInt(from) * parseInt(k)
      }    
    
      function multiply_add_inner(from, k, to)
      {
        return jsnums.add(
            jsnums.fromString(multiply_inner(from, k)), 
            jsnums.fromString(to)).toString();
        //return parseInt(from) * parseInt(k) + parseInt(to);
      }   
    
      function multiply_add(from, k, to)
      {
        var from_array = [];
        
        from.find('td').each(function(index)
        {
          from_array.push($(this).text());
        });
        
        to.find('td').each(function(index)
        {
          var result = multiply_add_inner(from_array[index], k, $(this).text());
          
          $(this).text(result);
        });        
      }
      
      $(function() {
        
        $( "#create-dialog" ).dialog({
          autoOpen: false,
          height: 370,
          width: 350,
          modal: true,
          open: function(event, ui)
          {
            
          },          
          buttons: {
            "确定": function() 
            {
              var n = $('#create-dialog #matrix-n').attr('value');
              var m = $('#create-dialog #matrix-m').attr('value');
              
              if(!/^[0-9/]+$/.test(n) || parseInt(n) > 10)
              {
                $('#create-dialog #matrix-n').addClass('ui-state-error');
                $( $( "#create-dialog" ).dialog('widget') )
                //.effect('shake', {speed: 50});
                .effect('bounce', {speed: 50});
                                
                return;
              }
              else if(!/^[0-9/]+$/.test(m) || parseInt(m) > 10)
              {
                $('#create-dialog #matrix-m').addClass('ui-state-error');
                $( $( "#create-dialog" ).dialog('widget') )
                //.effect('shake', {speed: 50});
                .effect('bounce', {speed: 50});
                
                return;
              }
              else
              {
                $('#create-dialog #matrix-n').removeClass('ui-state-error');
                $('#create-dialog #matrix-m').removeClass('ui-state-error');
                
                create_matrix(n, m);
                
                $( this ).dialog( "close" );                 
              }
            },
            "取消": function() 
            {
              $('#create-dialog #matrix-n').attr('value', '');
              $('#create-dialog #matrix-m').attr('value', '');
              $('#create-dialog #matrix-n').removeClass('ui-state-error');
              $('#create-dialog #matrix-m').removeClass('ui-state-error');                               
              $( this ).dialog( "close" );
            }
          },
          close: function() {
          }
        });
                
        $( "#transform-dialog" ).dialog({
          autoOpen: false,
          height: 350,
          width: 350,
          modal: true,
          open: function(event, ui)
          {
            var scenario = $( "#transform-dialog" ).dialog("option", "scenario");
            
            $( "#transform-dialog #transform-type").buttonset();
        
            $( "#transform-dialog #transform-type #transform-type-swap").click(function(e)
            {
              $('label[for="transform-k"]').hide();
              $("#transform-k").hide();
              $('#transform-dialog #transform-type').attr('type_value', 'swap');
            });
            
            $( "#transform-dialog #transform-type #transform-type-multiply-add").click(function(e)
            {
              $('label[for="transform-k"]').show();
              $("#transform-k").show();
              $('#transform-dialog #transform-type').attr('type_value', 'multiply-add');
            });
            
            $( "#transform-dialog #transform-type #transform-type-multiply").click(function(e)
            {
              $('label[for="transform-k"]').show();
              $("#transform-k").show();
              $('#transform-dialog #transform-type').attr('type_value', 'multiply');
            });
            
            if(scenario == "DnD")
            {
              $('label[for="transform-type-swap"]').show();
              $('label[for="transform-type-multiply-add"]').show();
              $('label[for="transform-type-multiply"]').hide();
              
              $( "#transform-dialog #transform-type #transform-type-multiply").hide();
              $( "#transform-dialog #transform-type #transform-type-multiply-add").click();
            }
            else
            {
              $('label[for="transform-type-swap"]').hide();
              $('label[for="transform-type-multiply-add"]').hide();
              $('label[for="transform-type-multiply"]').show();
               
              $( "#transform-dialog #transform-type #transform-type-multiply").click();
            }            
          },
          buttons: {
            "确定": function() {
              var bValid = true;
              
              var from = $( "#transform-dialog" ).dialog("option", "from");
              
              var to = $( "#transform-dialog" ).dialog("option", "to"); 
              
              var type_value = $('#transform-dialog #transform-type').attr('type_value');
              
              var k = $('#transform-dialog #transform-k').attr('value');
              
              if(/^-?[0-9/]+$/.test(k) || type_value == 'swap')
              {
                bValid = true;
              }
              else
              {
                bValid = false;
              }   
 
              if ( bValid ) 
              {         
                 
                $('#transform-dialog #transform-k').removeClass('ui-state-error');
                
                if(type_value == 'multiply-add')
                {               
                  multiply_add(from, k, to);
                  //$(to).effect("pulsate");                
                  $(from).effect("highlight", {speed: "slow"});
                  $(to).effect("highlight", {speed: "slow"});
                }
                else if(type_value == 'multiply')
                {                  
                  to.find('td').each(function(index)
                  {
                    var result = multiply_inner($(this).text(), k);
                    
                    $(this).text(result);
                  }); 
                }
                else
                {
                  clone = from.clone();
                  
                  clone.insertAfter(to);
                  
                  initRow(clone);
                  
                  to.insertAfter(from);
                  
                  from.remove();
                  
                  $(clone).effect("highlight", {speed: "slow"});
                  $(to).effect("highlight", {speed: "slow"});
                }
                
                $('#transform-dialog #transform-k').attr('value', '');                                 
                $( this ).dialog( "close" );
              }
              else
              {
                $('#transform-dialog #transform-k').addClass('ui-state-error');
                $( $( "#transform-dialog" ).dialog('widget') )
                //.effect('shake', {speed: 50});
                .effect('bounce', {speed: 50});
              }
            },
            Cancel: function() 
            {
              $('#transform-dialog #transform-k').attr('value', '');
              $('#transform-dialog #transform-k').removeClass('ui-state-error');                                 
              $( this ).dialog( "close" );
            }
          },
          close: function() {
          }
        });
        
        $("#create-button").click(function(e){
          $( "#create-dialog" ).dialog( "open" );
        });
        
        function initRow(this_row)
        {
          $('td', this_row).editable(function(value, settings)
          {
            return value;
          },
          {
            onblur : 'submit',
            placeholder : '0',
            tooltip : '点击修改...'
          });
          
          $(this_row).hover(function()
          {
            $(this).addClass("ui-state-hover");
          },
          function()
          {
            $(this).removeClass("ui-state-hover");
          });
          
          $(this_row).dblclick(function(event){            
              $( "#transform-dialog" ).dialog( "option", "from", $(this_row));
              $( "#transform-dialog" ).dialog( "option", "to", $(this_row));
              $( "#transform-dialog" ).dialog("option", "scenario", "Single");
              $( "#transform-dialog" ).dialog( "open" );             
          });
          
          $(this_row).draggable({ opacity: 0.7, helper: "clone"});
          
          $(this_row).droppable({
            drop: function( event, ui ) {
              $( "#transform-dialog" ).dialog( "option", "from", ui.draggable);
              $( "#transform-dialog" ).dialog( "option", "to", $(this_row));
              $( "#transform-dialog" ).dialog("option", "scenario", "DnD");
              $( "#transform-dialog" ).dialog( "open" );            
            },
            hoverClass: "ui-state-hover"
          });
        }
        
        function create_matrix(n, m)
        {
            n = parseInt(n);
            m = parseInt(m);
          
            var tbody = $("#matrix tbody.matrix-rows");
            
            tbody.empty();
            
            var tr = $("<tr />");
            var td = $("<td />");
            td.text("");
            
            for(var i = 0; i < m; i++)
            {
              tr.append(td.clone());
            }
            
            for(var j = 0; j < n; j++)
            {
              tbody.append(tr.clone());
            }
          
            $(".matrix-rows tr").addClass("ui-widget-content");
          
            $(".matrix-rows tr").each(function(index)
            {
              initRow(this);                    
            });
            
            $('#matrix').css({'width': 7 * m + 'em'});
            $('#matrix td').css({'text-align': 'center', 'width': '7em', 'height': '5em'});
        }
        
        $(".matrix-rows tr").addClass("ui-widget-content");
      
        $(".matrix-rows tr").each(function(index)
        {
          initRow(this);                    
        });   
      });
      
      
      // $( ".matrix-rows" ).sortable({
  // change: function(event, ui)
  // {
    // //alert("change");
  // }
// });
//         
    </script>
  </head>
  <body>
  <div class="container">
    <div class="ui-widget">
      <div class="ui-corner-all well" id="intro"> 
        <h2>使用说明</h2>
        <p>创建矩阵后：</p>
        <ul>
          <li>单击任何一个元素可以修改其值</li>
          <li>双击一行可以将其乘以k</li>
          <li>将一行拖动到另外一行可以交换两行或乘以k相加</li>
        </ul>
      <div class="">
        <button id="create-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
          <span class="ui-button-text">创建矩阵</span>
        </button>
      </div> 
      </div>  
    </div> 
    <div class="">
      <table class="centered" id="matrix">
        <!--         <thead><tr><th></th></tr></thead> -->
        <tbody class="matrix-rows">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
            <td>8</td>
            <td>9</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div id="create-dialog" title="创建矩阵">
      <form>   
      <div class="ui-widget ui-corner-all well" > 
        <p><span class="ui-icon ui-icon-info" style="float: left"></span>
                        请选择希望创建的矩阵大小（n行m列）：</p>
      </div>
      <fieldset class='form-stacked'>
        <label for="matrix-n">n=</label>
        <input type="text" name="matrix-n" id="matrix-n" title="请输入1-10之间的数字" 
        class="ui-widget-content ui-corner-all" />
        <label for="matrix-m">m=</label>
        <input type="text" name="matrix-m" id="matrix-m" title="请输入1-10之间的数字" 
        class="ui-widget-content ui-corner-all" />
        </fieldset>
      </form>
    </div>    
    <div id="transform-dialog" title="行初等变换">  
      <form>    
      <div class="ui-widget well">
        <div class="ui-corner-all" > 
          <p><span class="ui-icon ui-icon-info" style="float: left"></span>请选择希望进行的初等变换：</p>
        </div>
      </div>    
      <fieldset class=''>
        <div id="transform-type" class=''>
          <input type="radio" id="transform-type-swap" name="transform-type" />
          <label for="transform-type-swap">交换两行</label>
          <input type="radio" id="transform-type-multiply-add" name="transform-type"/>
          <label for="transform-type-multiply-add">乘以k加上</label>
          <input type="radio" id="transform-type-multiply" name="transform-type"/>
          <label for="transform-type-multiply">当前行乘以k</label>
        </div>
       </fieldset>
       <fieldset class='form-stacked'>
        <div>
          <label for="transform-k">k=</label>
          <input type="text" name="transform-k" id="transform-k"
           title="请输入整数、小数或分数" 
          class="ui-widget-content ui-corner-all" />
        </div>
       </fieldset>
      </form>
    </div>
  </div>

  </body>
</html>